<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加投诉分类</title>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!--跨域插件-->
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>

<div id="app">
   <h1>添加投诉分类</h1>
   投诉类型名称：<input v-model="editComplainsType.title" type="text" placeholder="0-10个汉字" @blur="checkComplainsTypeTitle" >
    <span v-show="showEditComplainsTypeSpan" :style="{color:spanFontColor}">{{editComplainsTypeExistSpanContent}}</span>
    <br>
   投诉类型排序：
   <select :value="editComplainsType.sort" v-model="editComplainsType.sort" >
        <option v-for="state in states" :value="editComplainsType.sort" >{{state}}</option>
   </select>
    <span style="font-size: smaller">数字越小，排名越靠前</span><br>
    <button @click="saveComplainsType">提交</button>
    <br>
    <br>
    <br>

    <h1>所有投诉类型</h1>
    <button>批量删除</button>
    <input v-model="inputText" type="text"><button @click="selectComplainsType">搜索</button>
    <button @click="getComplainsTypes">显示全部</button>
    <table border="3px" style="border-width: 3px">
        <tr>
            <th><input type="checkbox" v-model="allChoose"></th>
            <th>序号</th>
            <th>ID</th>
            <th>类型</th>
            <th>排序</th>
            <th>操作</th>
        </tr>
        <tr v-for="complainsType,index in complainsTypes.list">
            <td><input type="checkbox" v-model="chooseComplainsTypeIds"></td>
            <td>{{index+1}}</td>
            <td>{{complainsType.id}}</td>
            <td>{{complainsType.title}}</td>
            <td>{{complainsType.sort}}</td>
            <td>
                <button>修改</button>
                <button @click="deleteComplainsType(index)">删除</button>
            </td>
        </tr>
    </table>
    <-- 分页位置 -->
    <div>
        {{pageInfo.total}} 条
        <a v-for="i in pageInfo.pages" @click.prevent="initData(i)"
           :class="{'current':pageInfo.pageNum === i}">{{i}}</a>
        {{pageInfo.pageNum}}/{{pageInfo.pages}} 页
    </div>
</div>
<script>

    var app = new Vue({
        el:"#app",
        data:{
            //排序下拉列表框的数据
            states:[],
            //从服务器获取所有的投诉类型的数据
            complainsTypes:{},
            //设置数据默认值，设置下拉列表框的默认值
            editComplainsType:{},
            //输入的标题是否已经存在或者是否合法的标志,同时控制是否能够提交数据
            editComplainsTypeExist:{},
            //控制editComplainsTypeSpan是否显示
            showEditComplainsTypeSpan:false,
            //span的文本内容
            editComplainsTypeExistSpanContent:{},
            //span的字体颜色
            spanFontColor:{},
            //是否全选
            allChoose:false,
            //已经选中的分类的ID数组
            chooseComplainsTypeIds:[],
            //模糊搜索文本框输入的内容
            inputText:{},
            //分页情况
            pageInfo:{},
        },
        created:function(){
            //先加载数据
            this.initData();
        },
        watch:{
            //勾选最上方的框，将所有选中，否则反选
          allChoose: function (){
              if(this.allChoose) {
                  this.complainsTypes.forEach(complainsType => this.chooseComplainsTypeIds.push(complainsType.id));
              }else if(this.complainsTypes.length === this.chooseComplainsTypeIds.length){
                  //下方选中，全选按钮进行勾选
                  this.complainsTypes.forEach(complainsType => this.chooseComplainsTypeIds.push(complainsType.id));
              }else{
                  this.chooseComplainsTypeIds=[];
              }
          }
        },
        methods:{
            //数据初始化
            initData:function(){
                this.states = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
                this.editComplainsType.sort = 1;
                this.getComplainsTypes();
            },
            //获取complainsType的所有数据
            getComplainsTypes:function(){
                axios.post("http://localhost:8080/manage/getAllComplainsTypes")
                    .then(res=>{
                        this.complainsTypes = res.data.data;
                    });
            },
            //新增故障类型时输入框失去焦点对文本进行查重验证
            checkComplainsTypeTitle:function(){
                var RE = /^[\u4e00-\u9fa5]{4,10}$/;
                var flag = RE.test(this.editComplainsType.title);
                if(flag === false){
                    this.editComplainsTypeExist = false;
                }else{
                    axios.post("http://localhost:8080/manage/checkComplainsTypeExists",this.editComplainsType)
                        .then(res=>{
                            this.editComplainsTypeExist = res.data.success;
                        });
                }
                //显示editComplainsTypeSpan
                this.showEditComplainsTypeSpan = true;
                //修改span中的提示文字的颜色和内容
                this.showEditComplainsTypeExistSpan();
            },
            //显示故障类型title是否已经存在或者输入是否合理
            showEditComplainsTypeExistSpan:function(){
                if(this.editComplainsTypeExist === false){
                    //设置文本颜色
                    this.spanFontColor = "red";
                    //设置文本内容
                    this.editComplainsTypeExistSpanContent = "该类型已存在或不合法";
                }else{
                    this.spanFontColor = "green";
                    this.editComplainsTypeExistSpanContent = "√";
                }
            },
            //保存投诉分类
            saveComplainsType:function(){
                //判断投诉类型是否满足输入的要求
                if(this.editComplainsTypeExist === false){
                    alert("投诉类型已存在或不合法！");
                    return;
                }
                //保存该类型
                axios.post("http://localhost:8080/manage/addComplainsType",this.editComplainsType)
                    .then(res=>{
                        var returnContent = res.data.message;
                        //刷新数据
                        this.getComplainsTypes();
                        //清除正在编辑的ComplainsType的参数*

                        this.editComplainsType = {};
                        //弹窗提示添加成功
                        alert(returnContent);
                    });
            },
            //删除投诉类型
            deleteComplainsType:function(index){
                axios.delete("http://localhost:8080/manage/deleteOneComplainsType/"+this.complainsTypes[index].id)
                    .then(res=>{
                        //删除页面数据中的这一条数据
                        this.complainsTypes.splice(index,1);
                    });
            },
            //批量删除投诉类型
            deleteComplainsTypes:function(){
                //先判断选中的内容是否为空
                if(this.chooseComplainsTypeIds.length === 0){
                    return;
                }
                //进行批量删除
                axios.delete("http://localhost:8080/manage/deleteBatchComplainsTypes/",this.chooseComplainsTypeIds)
                    .then(res=>{
                        //删除页面数据中的这一条数据
                        //仅保留没有删除的数据
                        this.complainsTypes = this.complainsTypes.filter(complainsType=>{
                            if(!this.chooseComplainsTypeIds.includes(complainsType.id)){
                                return complainsType;
                            }
                        });
                    });
            },
            //模糊查询方法，进行模糊搜索
            selectComplainsType:function(){
                this.getComplainsTypes();
            },

        }
    });


</script>


</body>
</html>